<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初始vue</title>
</head>
<body>
  <div id="app">
    <h2 v-cloak>{{freezeObj.state}}</h2>
    <h2 v-cloak>{{message}}</h2>
    <h2 v-if="isTrue">我是if</h2>
    <h2 v-show="isTrue">我是show</h2>
    <button @click="changeIsTrue">切换isTrue</button>
    <button @click="changFreezeObj">改变HH</button>
    <!-- <item-list ></item-list> -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    // vue 是渐进式框架，关注图层  数据响应式
    // v-xxx的形式，是vue的指令 
    //Object.freeze() 冻结数据，无法进行响应式 冻结对象要为对象
    // $watch 是实例方法
    

    // 生命周期
    // beforeCreate -> created ->beforeMount -> mounted ->beforeUpdate -> updated ->beforeDestroy->destroyed
    Vue.component('item-list',{
      props:{
        list:{
          type:Array,
          default:()=>[1,2,3]
        }
      },
      template:'<h2 v-for="item in list">{{item}}</h2>'
    })
    const freezeObj={state:'我被冻结了'}
    Object.freeze(freezeObj)
    const vm=new Vue({
      el:"#app",
      data: {
        freezeObj,
        message:'hello world',
        isTrue: true,
        dataList:[7,8,9]
      },
      methods:{
        changeIsTrue(){
          this.isTrue =  !this.isTrue;
        },
        changFreezeObj(){
          this.freezeObj.state='我改变了'
        },
      },
    });
    vm.$watch('message',function(newValue,oldValue){
      console.log(newValue,oldValue,'watch')
    })
  </script>
</body>
</html>